<template>
	<view class="cu-header flex-box" :class="theme" :style="{height: CustomBar + 'px', 'padding-top': StatusBar + 'px'}">
		<view class="header-action"><slot name="action-left"></slot></view>
		<view class="center flex-item">
			<view class="title"><slot name="title"></slot></view>
			<view class="sub-title"><slot name="sub-title"></slot></view>
			<view class="center-action"><slot name="center-action"></slot></view>
		</view>
		<view class="header-action"><slot name="action-right"></slot></view>
	</view>
</template>

<script>
	export default {
		props: {
			theme: {// 主题，
				type: String,
				default: 'light'
			}
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.cu-header{
		align-items: flex-end;
	}
	.cu-header.light{
		color: #FFFFFF;
		background: $main-color;
	}
	.cu-header.dark{
		color: #333333;
	}
	.cu-header.blank{
		color: #FFFFFF;
		background: transparent;
	}
	.header-action{
		padding: 0 26rpx 12rpx;
		font-size: 40rpx;
	}
	.center{
		padding: 0 10rpx 12rpx;
	}
	.title{
		font-size: 28rpx;
	}
	.sub-title{
		font-size: 20rpx;
		color: #CCCCCC;
	}
</style>
